<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue_component</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <school></school>
        <student></student>
    </div>
<script>
    Vue.config.productionTip = false;
    Vue.config.devtools = true;


    const hello = Vue.extend({
        data() {
            return {
                hello: '你好'
            }
        },
        template: `
          <div>
          <h1>{{ hello }}</h1>
          </div>
        `
    });

    //定义组件 传入的对象和new Vue()中的对象差不多
    const school = Vue.extend({
        //注意不要配置el 组件不会对单独的容器使用 而且这里的data要用函数式 作用:一个页面对其数据的修改 不会影响到其他的页面
        data() {
            return {
                schoolName: '尚硅谷',
                address: '北京昌平'
            }
        },
        //定义组件的时候要定义使用模板 要用模板字符串 主要模板的最外面要加 div标签
        template: `
          <div>
          <h2>学校名称:{{ schoolName }}</h2>
          <h2>学校地址:{{ address }}</h2>
          <button @click="msg" >点我输出this</button>
          </div>
        `,
        methods:{
            msg() {
                //输出VueComponent
                console.log(this);
            }
        }

    });
    const student = Vue.extend({
        //注意不要配置el 组件不会对单独的容器使用
        data() {
            return {
                studentName: '张三',
                age: 18
            }
        },
        //定义组件的时候要定义使用模板 要用模板字符串 主要模板的最外面要加 div标签
        template: `
          <div>
          <h2>学生名字:{{ studentName }}</h2>
          <h2>学生年龄:{{ age }}</h2>
          <hello></hello>
          </div>
        `,
        components:{
            hello
        }
    });

    //打印一下school和student
    //vueComponent函数  两个函数不相等

    console.log(school)
    console.log(student)

    console.log(school === student) //false
    school.a = 99;
    console.log(school.a) //99
    console.log(student.a)//undefined

    //注册组件(局部注册)
    const vm = new Vue({
        el: '#root',
        components: {
            // 组件的真实名字 组件的对象 如果两个名字相同 直接写一个名字即可
            school: school,
            student: student
        }
    });


</script>
</body>
</html>